<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表单学习</title>
</head>

<body>
  <h2>表单</h2>
  <form action="">
    <input type="text" placeholder="请输入用户名">
    <input type="password" placeholder="请输入密码"></input>
    <div>
      <!-- 单选,通过name分为一组 -->
      <input type="radio" name="sex" value="男">男</input>
      <input type="radio" name="sex" value="女">女</input>
    </div>

    <div>
      <!-- 
        通过label标签关联标签
        label标签的for属性,关联输入框id,实现点击文字,也能勾选上
      -->
      <label for="boy">男</label>
      <input id="boy" type="radio" name="sex" value="男"></input>

      <label for="girl">女</label>
      <input id="girl" type="radio" name="sex" value="女"></input>
    </div>

    <!-- 复选框 -->
    <div>
      <input type="checkbox" name="hobby" value="1">唱</input>
      <input type="checkbox" name="hobby" value="2">跳</input>
      <input type="checkbox" name="hobby" value="3">rap</input>
      <input type="checkbox" name="hobby" value="4">吃</input>
    </div>

    <!-- 文本域 -->
    <textarea placeholder="请输入内容" name="" id="" cols="30" rows="10"></textarea>

    <!-- 按钮  提交 or  重置-->
    <!-- 
        如果提交元素到指定的地址,地址上要带上表单的输入内容
        1.需要在每个input框上加上name属性(key)
        2.name属性的值,就是表单的输入内容(value)
     -->
    <button type="submit">提交</button>
    <button type="reset">重置</button>
  </form>
</body>

</html>